<template>
	<view class="flex-center smart-column">
		<view class="smart-page-head">
			<view class="smart-panel-head-title">
				scroll-view区域滚动视图
			</view>
		</view>
		<view>
			<view class="smart-page-head">
				纵向滚动
			</view>
			<scroll-view scroll-y="true" style="height: 700rpx; width: 500rpx;">
				<view v-for="(item,index) in 3" style="height: 500rpx;" :style="{ backgroundColor: colorList[index]}">
					{{index}}
				</view>
			</scroll-view>
		</view>
		<view>
			<view class="smart-page-head">
				横向滚动
			</view>
			<scroll-view scroll-x="true" scroll-left="120" style="height: 500rpx;width: 500rpx; white-space: nowrap;">
				<view v-for="(item,index) in 3" style="height: 500rpx;width: 100%;"
					:style="{ backgroundColor: colorList[index]}">
					{{index}}
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				colorList: ["blue", "red", "yellow"],
				colorList: ["blue", "red", "yellow"]
			}
		},
		methods: {

		}
	}
</script>

<style>

</style>